import React, { useState, useEffect } from 'react';
import styles from './index.less';
import NewsCard from '../../components/newsCard';
import { useDispatch, useSelector } from 'dva';
import InViewPort from '../../components/InViewPort';
import { Tabs } from 'antd-mobile';
import { useIntl, getLocale } from 'umi';

import MeetingItem from '../../components/meeting/MeetingItem';

function Index() {
  const dispatch = useDispatch();
  const {
    meetingPageIndex,
    meetingLastPage,
    userInfo,
    meetingList = [],
    articleCategoryList = [],
  } = useSelector(({ index }) => index);
  const [buttonIndex, setButtonIndex] = useState(0);
  const [listData, setListDate] = useState();
  const intl = useIntl();
  const lang = () => getLocale()?.split('-')[0]?.toUpperCase();

  console.log(meetingPageIndex, meetingLastPage);

  const meetingCategories = [
    {
      name: intl.formatMessage({ id: 'Recomment_Meeting' }),
    },
    {
      name: intl.formatMessage({ id: 'Meeting_List' }),
    },
  ];

  const getList = (index, isReset) => {
    const payload = {
      isUp: true,
      page: 0,
      size: 10,
      recommend: index == 0 ? 1 : 0,
      sort: 'sequence,desc',
    };
    if (index == 1) {
      payload['sort'] = 'sequence,desc';
    }
    dispatch({
      type: 'index/apiGetMeetingList',
      payload,
      isReset,
    });
  };

  useEffect(() => {
    getList(buttonIndex, true);
  }, []);

  function handelButton(item, index) {
    setButtonIndex(index);
    getList(index, true);
  }

  function onEnter() {
    console.log(meetingPageIndex, meetingLastPage);
    const index = buttonIndex;
    if (meetingPageIndex < meetingLastPage) {
      const payload = {
        isUp: true,
        page: meetingPageIndex + 1,
        size: 10,
        recommend: index == 0 ? 1 : 0,
        sort: 'sequence,desc',
      };
      if (index == 1) {
        // payload['sort'] = 'sequence,desc';
      }
      dispatch({
        type: 'index/apiGetMeetingList',
        payload,
      });
    }
  }

  return (
    <div className={styles.page}>
      <div className={styles.header}>
        {meetingCategories.map((item, index) => {
          return (
            <div
              className={`${styles.buttonItem} ${buttonIndex == index && styles.selectButtonItem}`}
              key={index}
              onClick={() => {
                handelButton(item, index);
              }}
            >
              <span className={styles.text}>{item.name}</span>
            </div>
          );
        })}
      </div>
      <div className={styles.myBody}>
        {meetingList &&
          meetingList.map((item, index) => {
            if (index == meetingList.length - 1) {
              return (
                <InViewPort key={index} onEnter={onEnter}>
                  <MeetingItem item={item} key={item.id} />
                </InViewPort>
              );
            }
            return <MeetingItem key={item.id} item={item} />;
          })}
      </div>
    </div>
  );
}

export default Index;
